import { ref, onBeforeUnmount, reactive } from 'vue'
import { getCurrentInstance } from 'vue'
export default function() {
  let tabControlShowScrollHeight = ref(null)
  // 获取当前的组件实例
  const { proxy: _this } = getCurrentInstance()

  // 顶部的控制栏默认不显示
  let tabControlIsShow = ref(false)
  // BackTop的显示与隐藏
  let isBackTopShow = ref(false)
  // 定义一个控制栏距离顶部的高度
  let tabControlTop = ref(235)
  // 事件总线监听
  _this.$bus.on('imageLoad', () => {
    // 当最后一张图片加载完成的时候获取高度
    tabControlTop.value = tabControlShowScrollHeight.value.offsetHeight
  })
  // 卸载事件总线
  onBeforeUnmount(() => {
    _this.$bus.off('imageLoad')
  })

  function scroll({ y }) {
    // 判断是否显示分类控制栏
    isBackTopShow.value = tabControlIsShow.value =
      -y > tabControlTop.value ? true : false
  }
  return reactive({
    scroll,
    tabControlIsShow,
    isBackTopShow,
    tabControlShowScrollHeight
  })
}
